<template>
  <div class="container">
    <div class="panel">
      <div class="about">
        <div class="flex">
          <div class="div-avatar">
            <img class="avatar" :src="veekrayInfo.avatar"/>
          </div>
          <div class="flex-item pad-r-10 info">
            <div v-if="veekrayInfo.remarkName" class="remarkName font-w">{{ veekrayInfo.remarkName }}</div>
            <div v-if="veekrayInfo.nickname">昵称：{{ veekrayInfo.nickname }}</div>
            <div v-if="veekrayInfo.wechatNo">微信：{{ veekrayInfo.wechatNo }}</div>
            <div v-if="veekrayInfo.phone">手机：{{ veekrayInfo.phone }}</div>
            <div v-if="veekrayInfo.address">地址：{{ veekrayInfo.address }}</div>
            <div v-if="veekrayInfo.career">职业：{{ veekrayInfo.career }}</div>
          </div>
          <div class="div-btn-card">
            <button class="mini-btn mar-l-30 mar-t-30" size="mini" @click="$pt.reLaunch({ url: '/pages/home/main?memberId=' + veekrayInfo.memberId })">TA的名片</button>
          </div>
        </div>
        <div class="mar-t-10"></div>
        <template v-if="labelsBoolean">
          <div class="border-t mar-r-30 mar-t-10 mar-b-10"></div>
          <div class="info mar-b-10">
            <div class="flex-item">
              <button class="mini-btn mar-r-5 btn-label" size="mini" v-for="(label, index) in labels" :key="index">{{label}}</button>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="panel pad-l-14">
      <div class='flex v-align-c pad-t-10 pad-b-10' @click="$pt.navigateTo({url:'/pages/personal/customer/label/main?memberId=' + friendId})">
        <div class="flex-item">设置备注和标签</div>
        <div class='font-gray'>
          <icon class="iconfont icon-arrow-right font-14 mar-r-10"></icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMemberInfo
  } from '@/api/customer'

  export default {
    data() {
      return {
        friendId: '',
        veekrayInfo: {},
        labels: [],
        labelsBoolean: true
      }
    },
    onShow() {
    },
    mounted() {
      this.friendId = this.getCurrentPage().query.memberId
      console.log(this.friendId)
      if (this.friendId) {
        this.getVeekrayInfo()
      }
    },
    methods: {
      getVeekrayInfo() {
        getMemberInfo({
          memberId: this.getCustomerId,
          customerMemberId: this.friendId
        }).then((response) => {
          if (response.isError) return
          this.labelsBoolean = true
          this.veekrayInfo = response.data
          this.labels = this.veekrayInfo.memberLabelList
          if (this.labels === undefined) {
            this.labelsBoolean = false
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped>
  .about {
    padding-left: 20px;
    padding-bottom: 5px;
  }

  .about .avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-top: 40px;
  }

  .about .info {
    padding-top: 50px;
    padding-left: 18px;
    color: #666;
  }

  .about .remarkName {
    font-size: 18px;
  }

  .btn-label {
    border: 1px solid #f8c400;
    border-radius: 5px;
    font-size: 12px;
    background-color: #ffffff;
  }

  .div-btn-card {
    position: absolute;
    right: 30px;
    margin-top: -10px;
  }
</style>
